<template>
  <div>
    <el-table
      size="small"
      :data="tableData"
      @sort-change="shortHandler"
      stripe
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column
        sortable
        width="150px"
        prop="serialNumber"
        label="设备出厂ID号"
        align="center"
      ></el-table-column>
      <el-table-column
        sortable
        width="90px"
        prop="version"
        label="版本号"
        align="center"
      ></el-table-column>
      <el-table-column
        sortable
        width="190px"
        prop="productNo"
        label="产品编号"
        align="center"
      ></el-table-column>
      <el-table-column
        width="150px"
        prop="typeName"
        label="产品类型"
        align="center"
      ></el-table-column>
      <!-- <el-table-column
        width="120px"
        prop="imsi"
        label="IMSI"
        align="center"
      ></el-table-column> -->
      <!-- <el-table-column
        prop="location"
        label="位置"
        align="center"
      ></el-table-column> -->
      <el-table-column
        width="220px"
        label="已升级 - 待升级 / 总数"
        align="center"
      >
        <el-table-column
          align="center"
          label="升级包"
        >
          <template slot-scope="scope">
            <span style="color: #07c160">{{ scope.row.packageSucceedCount ? scope.row.packageSucceedCount : 0 }}</span>
            -
            <span style="color: #c87d2f">{{ scope.row.packageUpgradeCount ? scope.row.packageUpgradeCount : 0 }}</span>
            /
            <span>{{ scope.row.upgradeTotalCount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="参数"
        >
          <template slot-scope="scope">
            <span style="color: #07c160">{{ scope.row.settingSucceedCount ? scope.row.settingSucceedCount : 0 }}</span>
            -
            <span style="color: #c87d2f">{{ scope.row.settingUpgradeCount ? scope.row.settingUpgradeCount : 0 }}</span>
            /
            <span>{{ scope.row.upgradeTotalCount }}</span>
          </template>
        </el-table-column>
        <!-- <template slot-scope="scope">
          <span style="color:#07c160">{{ scope.row.packageSucceedCount ? scope.row.packageSucceedCount : 0 }}</span> -
          <span style="color:#07c160">{{ scope.row.packageUpgradeCount ? scope.row.packageUpgradeCount : 0 }}</span> /
          <span style="color:#10aeff">{{ scope.row.settingSucceedCount ? scope.row.settingSucceedCount : 0 }}</span>
          -
          <span style="color:#10aeff">{{ scope.row.settingUpgradeCount ? scope.row.settingUpgradeCount : 0 }}</span> /
          <span style="color:#7b7b7b">{{ scope.row.upgradeTotalCount }}</span>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="upgradeStatus"
        label="固件 / 参数"
        width="120px"
        align="center"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.upgradeStatus === 'unknown'"
            style="color: #fa5151;"
          >未知</span>
          <span
            v-else-if="scope.row.upgradeStatus === 'upgraded'"
            style="color: #07c160"
          >已升级</span>
          <span
            v-else
            style="color: #c87d2f"
          >待升级</span> /
          <span
            v-if="scope.row.settingUpgradeStatus === 'unknown'"
            style="color: #fa5151;"
          >未知</span>
          <span
            v-else-if="scope.row.settingUpgradeStatus === 'upgraded'"
            style="color: #07c160"
          >已升级</span>
          <span
            v-else
            style="color: #c87d2f"
          >待升级</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="resetCount"
        label="复位次数"
        sortable
        align="center"
      ></el-table-column>
      <el-table-column
        prop="description"
        label="备注"
        sortable
        align="center"
      ></el-table-column>
      <!-- <el-table-column
        width="155px"
        prop="createdAt"
        label="创建时间"
        sortable
        align="center"
      ></el-table-column> -->
      <el-table-column
        width="160px"
        prop="uploadedAt"
        sortable
        label="上报时间"
        align="center"
      ></el-table-column>
      <el-table-column
        width="110px"
        label="更多参数"
        align="center"
        v-if="userGuardList.includes(guard.ProductManage)"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-tickets"
            size="small"
            @click="showDetail(scope.row)"
          >查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="150px"
        v-if="userGuardList.includes(guard.ProductManage)"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="showEdit(scope.row)"
            size="small"
            @refresh="search"
          >编辑</el-button>
          <el-button
            type="text"
            size="small"
            icon="el-icon-delete"
            @click="remove(scope.row.uuid, scope.row.serialNumber)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="600px"
      title="数据列表"
      :visible.sync="dialogVisible"
    >
      <el-table
        stripe
        :data="dataList"
      >
        <el-table-column
          prop="name"
          label="编号/名称"
        ></el-table-column>
        <el-table-column
          prop="display_name"
          label="中文名称"
        >
        </el-table-column>
        <el-table-column
          prop="value"
          label="数值"
        >
          <template slot-scope="scope">
            {{ scope.row.value.toString() }}
          </template>
        </el-table-column>
        <el-table-column
          prop="unit"
          label="计量单位"
        ></el-table-column>
      </el-table>
    </el-dialog>
    <edit
      ref="editComponent"
      @refresh="search"
      :updateForm="updateForm"
    ></edit>
    <detail ref="detailComponent"></detail>
  </div>
</template>

<script>
import Edit from './edit';
import Detail from './detail';
import moment from 'moment';
import { MomentFormat, SortType } from '../../../constants/common';
import { Message, MessageBox } from 'element-ui';
import { deleteDeviceApi, getDeviceInfoApi } from '../../../api/device';
import { deleteUpgradeDeviceApi } from '../../../api/upgradeDevice';
import { parseError } from '../../../utils';

export default {
  components: {
    Edit,
    Detail
  },
  model: {
    prop: 'sort'
  },
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      }
    },
    sort: {
      type: Object,
      default() {
        return {
          sortType: SortType.DESC
        };
      }
    }
  },
  data() {
    return {
      canEdit: {},
      btnLoading: false,
      addDialogVisible: false,
      dialogVisible: false,
      address: {
        longitude: null,
        latitude: null,
        location: ''
      },
      dataList: [],
      updateForm: {}
      // upgradeDeviceSelectedList: []
    };
  },
  computed: {
    upgradeDeviceSelectedList() {
      return this.$store.getters.getUpgradeDeviceSelectedList;
    }
  },
  methods: {
    search() {
      this.$emit('search');
    },
    showEdit(row) {
      this.$refs.editComponent.showDialog(row);
    },
    showDetail(row) {
      this.$refs.detailComponent.showDialog(row);
    },
    remove(uuid, name) {
      MessageBox.confirm(`确定删除产品${name}吗？`, '删除提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          deleteUpgradeDeviceApi(uuid)
            .then(() => Message.success('删除产品成功'))
            .catch(error => Message.error(parseError(error)))
            .finally(() => this.$emit('search'));
        })
        .catch(() => {});
    },
    shortHandler({ order, prop }) {
      this.$emit('orderBy', prop);
      this.sort.sortType = order === 'ascending' ? SortType.ASC : SortType.DESC;
      this.$emit('search');
    },
    checkData(row) {
      this.dataList = row.dataList;
      this.dialogVisible = true;
    },
    handleSelectionChange(value) {
      this.$store.dispatch(
        'setUpgradeDeviceSelectedList',
        value.map(device => {
          return device.uuid;
        })
      );
      const canEdit = [...new Set(value.map(prod => prod.typeUuid))];
      if (canEdit.length == 1) {
        const [label] = canEdit;
        this.canEdit.value = true;
        this.canEdit.label = label;
      } else {
        this.canEdit.value = false;
        this.canEdit.label = '';
      }
      this.$store.dispatch('setProductListEditObject', this.canEdit);
    }
  }
};
</script>
